<template>
    <div class="login-container">
        <el-image class="loginBgImg" :src="require('../../assets/image/loginBgImg.png')" fit="cover"></el-image>
        <div class="loginFormBox">
            <div class="loginFormBoxLeft"></div>
            <div class="loginFormBoxRight">
                <el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form" autocomplete="off" label-position="left">
                    <el-image class="loginLogo" :src="require('../../assets/logo1.png')" fit="cover"></el-image>

                    <div class="title-container">
                        <h3 class="title">三峡农夫OA系统</h3>
                    </div>

                    <el-form-item prop="account">
                        <!-- <i class="el-icon-user"></i> -->
                        <el-input ref="username" v-model="loginForm.account" placeholder="账号" name="username" type="text" tabindex="1" autocomplete="off" :validate-event="false">
                            <i slot="prefix" class="el-icon-user"></i>
                        </el-input>
                    </el-form-item>
                    <el-form-item prop="password">
                        <!-- <i class="el-icon-lock"></i> -->
                        <el-input
                            ref="password"
                            v-model="loginForm.password"
                            placeholder="密码"
                            name="password"
                            :type="pwdIsShow ? 'password' : 'text'"
                            tabindex="1"
                            autocomplete="off"
                            :validate-event="false"
                            @keyup.enter.native="loginApp('loginForm')"
                        >
                            <i slot="prefix" class="el-icon-lock"></i>
                            <!-- <i slot="suffix" class="el-icon-view" @click="pwdIsShow = !pwdIsShow"></i> -->
                        </el-input>
                    </el-form-item>
                    <el-button type="primary" class="loginBtn" :loading="isLoding" @click="loginApp('loginForm')">点击登录</el-button>
                </el-form>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: 'Login',
    data() {
        const validateUsername = (rule, value, callback) => {
            if (!value) {
                callback(new Error('账号不能为空'))
            } else {
                callback()
            }
        }
        const validatePassword = (rule, value, callback) => {
            if (!value) {
                callback(new Error('密码不能为空'))
            } else {
                callback()
            }
        }
        return {
            loginForm: {
                account: '',
                password: ''
            },
            loginRules: {
                account: [
                    {
                        required: true,
                        validator: validateUsername
                    }
                ],
                password: [
                    {
                        required: true,
                        validator: validatePassword
                    }
                ]
            },
            isLoding: false,
            pwdIsShow: true
        }
    },
    created() {},
    mounted() {},
    methods: {
        aaaaaaa() {
            console.log('111')
        },
        loginApp(formName) {
            this.isLoding = true
            // this.$router.replace('/index')
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    this.$request.postForm('/api/oa/users/login', this.loginForm).then((res) => {
                        if (res.code == '200') {
                            let loginMsg = res.data
                            sessionStorage.setItem('token', loginMsg.token)
                            sessionStorage.setItem('loginMsg', JSON.stringify(loginMsg))
                            this.$store.commit('set_userInfo', loginMsg)
                            let url = ''
                            if (loginMsg.permission == '1') {
                                url = '/index/statistics'
                            } else {
                                url = '/index/task'
                            }
                            this.$router.replace(url)
                        }
                    })
                } else {
                    this.$message.error('请仔细核对所填信息')
                }
            })
            this.isLoding = false
        }
    }
}
</script>

<style scoped="scoped">
.login-container {
    /* background-color: #2d3a4b; */
    width: 100%;
    height: 100vh;
    overflow: hidden;
    text-align: center;
    position: relative;
}
.loginBgImg {
    width: 100%;
    height: 100%;
}
.loginFormBox {
    width: 1000px;
    height: 600px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    background-image: url('../../assets/image/loginFormImg.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
}
.loginLogo {
    width: 60px;
    height: 60px;
    margin-bottom: 15px;
}
.loginFormBoxRight {
    /* background: #ffffff; */
    width: 360px;
    height: 100%;
    padding: 30px;
}
.login-form {
    width: 100%;
    margin-top: 90px;
    /* position: relative;
    left: 50%;
    margin-left: -200px; */
    /* height: 220px; */
    /* top: 50%; */
    /* margin-top: 220px; */
}
.title-container {
    margin-bottom: 30px;
    color: #333333;
}
.loginBtn {
    width: 100%;
}
.login-container >>> .el-input__inner {
    /* background-color: #2b3540; */
    /* border-color: #304156; */
    padding-left: 40px;
    color: #6a6a6a;
    border-top: none;
    border-left: none;
    border-right: none;
    border-radius: 0px;
}
.login-container >>> .el-input__inner::-webkit-input-placeholder {
    color: #545c70;
}
.login-container >>> .el-form-item__content {
    display: flex;
    justify-content: space-between;
    flex-wrap: nowrap;
}
.login-container >>> .el-form-item__content i {
    color: #545c70;
    margin-top: 10px;
    margin-right: 20px;
    font-size: 20px;
}
/* .login-container >>> .el-input__inner:-webkit-autofill,
.login-container >>> .el-input__inner:-webkit-autofill:hover,
.login-container >>> .el-input__inner:-webkit-autofill:focus,
.login-container >>> .el-input__inner:-webkit-autofill:active {
    -webkit-transition-delay: 99999s;
    -webkit-transition: color 99999s ease-out, background-color 99999s ease-out;
} */
.login-container >>> .el-form-item .el-input {
    width: 400px;
}
</style>
